﻿@{
    ViewBag.Title = "ScoreDistribute";
    Layout = "~/Views/Shared/_GridCommonLayout.cshtml";
}
<input type="hidden" value="@ViewBag.digitalStr" id="digital" />
<input type="hidden" value="@ViewBag.paper.Id" id="paperId" />
<h2><i class="glyphicon glyphicon-star" style="margin-right: 10px;"></i>@ViewBag.paper.STestName 结果分析
       <div class="buttons pull-right">
                <a id="back" href="/Teacher/PaperList?courseId=@ViewBag.paper.ICourseId" role="button" class="btn btn-inverse btn-labeled pull-right" style="margin-right:15px;">
                    <span class="btn-label"><i class="glyphicon glyphicon-backward"></i>
                    </span>返回</a>
            </div>
</h2>

<hr />


<div class="panel panel-primary" style="width: 20%">
    <div class="panel-heading">
        试卷详情
    </div>
    <div class="panel-footer">
        <ul class="list-group" style="width: 100%; margin-left: 0px;">
            <li class="list-group-item" style="color: black;">班级： @Html.DropDownList("class", new SelectList(ViewBag.classList, "SClassCode", "SClassName"), "所有人", new { @style = "width: 120px;border:1px solid #cccccc" })</li>
            <li class="list-group-item" style="color: black;">模式：
                @{
                    List<SelectListItem> model = new List<SelectListItem>();
                    model.Add(new SelectListItem { Text = "饼状图", Value = "1" });
                    model.Add(new SelectListItem { Text = "坐标图", Value = "2" });  
                }
                @Html.DropDownList("model", model as IEnumerable<SelectListItem>, new { @style = "width: 120px;border:1px solid #cccccc" })
            </li>
            <li class="list-group-item" style="color: black;">时间：@ViewBag.paper.IOverTime 分钟</li>
            <li class="list-group-item" style="color: black;">难度：@ViewBag.paper.IDiff</li>
            <li class="list-group-item" style="color: black;">总分：@ViewBag.paper.ITotal</li>
            <li class="list-group-item" style="color: black;">人数：<span id="stuCount"></span></li>
            <li class="list-group-item" style="color: black;">不及格人数：<span id="failCount"></span></li>
        </ul>
    </div>
</div>

<div id="scores" style="width: 76%; height: 500px; position: absolute; top: 90px; right: 0px;"></div>

@*<div id="error" style="width: 76%; height: 500px; position: absolute; top: 90px; right: 0px;"></div>*@
<div id="error" style="width: 76%; height: 500px;"></div>

<script src="~/Js/echarts-plain.js"></script>
<script>
    var stuCount = [];
    var paperId = $("#paperId").val();
    var digitalStr = "";
    $(function () {
        $("#model").val(1);//默认为饼状图
        //工具栏
        var tool = false;
        //班级变化
        $("#class").change(function () {
            var classCode = $(this).find("option:selected").val();
            $.ajax({
                url: "/Api/Teacher/analysePaper",
                type: "POST",
                dataType: "JSON",
                data: { paperId: paperId, classCode: classCode }
            }).done(function (data) {
                if (data == 1) {
                    window.location.href = "/Teacher/AnalysePaper?paperId=" + $("#paperId").val();
                }
                $("#digital").val(data);
                statistics(data,'pie');
                $("#model").val(1);
            });
        });

        $("#model").change(function () {
            var model = $(this).find("option:selected").val();
            digitalStr = $("#digital").val();
            if (model == 1) {
                tool = false;
                statistics(digitalStr, 'pie');
            }
            else if (model == 2) {
                tool = true;
                statistics(digitalStr, 'bar');
            }
        });



        digitalStr = $("#digital").val();
        statistics(digitalStr,'pie');
        //统计
        function statistics(strDigital, strModel) {
            
            var xAxis = []; var yAxis = [];
            stuCount = strDigital.split(",");
            $("#stuCount").text(stuCount[10]);//设置参加考试的人数
            $("#failCount").text(stuCount[11]);//设置挂科人数
            var temp = []            
            if (strModel == "bar")
            {
                for (var i = 0; i < 10; i++) {
                    temp.push(parseInt(stuCount[i]));
                }//分离出每个分数段的人数
                var section = "0-10, 10-20, 20-30, 30-40, 40-50, 50-60, 60-70, 70-80, 80-90, 90-100";
                var sectionArr = section.split(",");
                xAxis = [
                {
                    type: 'category',
                    name: '分数区间',
                    data: sectionArr
                }
                ];
                yAxis = [
                    {
                        type: 'value',
                        name: '人数',
                    }
                ];

            }
            else if (strModel == 'pie')
            {
                
                var value = new Array(0, 0, 0, 0);
                var d1 = parseInt(stuCount[6]);
                var d2 = parseInt(stuCount[7]);
                value[0] = stuCount[9];
                value[1] = stuCount[8];
                value[2] = d1 + d2;
                for (var i = 0; i < 6; i++) {
                    var d3 = parseInt(stuCount[i]);
                    var d4 = parseInt(value[3]);
                    value[3] = d4 + d3;
                }
                for (var i = 0; i < 4; i++) {
                    var name = "";
                    switch (i) {
                        case 0: name = '优(90+)'; break;
                        case 1: name = '良(80-90)'; break;
                        case 2: name = '中(60-80)'; break;
                        case 3: name = '不及格'; break;
                    }
                    var tempPie = {
                        value: value[i],
                        name: name
                    }
                    temp.push(tempPie);
                }
            }

            //分数统计
            var myChart = echarts.init(document.getElementById("scores"));
            var option = {
                title: {
                    text: '学生考试成绩分布图',
                    subtext: ''
                },
                tooltip: {
                    trigger: ''
                },
                legend: {
                    data: ['人数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        
                        dataView: { show: false, readOnly: false },
                        magicType: { show: tool, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: xAxis,
                yAxis: yAxis,
                series: [
                    {
                        name : '人数',
                        type: strModel,
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: temp
                    }
                ]
            };

            //分数统计结束！！！！！！！！！！！！
            myChart.setOption(option);
        }
    })


</script>
